<template>
	<e-popup :show="show"  mode="bottom" bgColor="transparent" :safeAreaInsetBottom="props.safeAreaInsetBottom"  @close="closeHandler">
		<view class="e-action-sheet" :style="[props.customStyle]">
			<view class="e-action-sheet__content" :style="[roundStyle]">
				<view class="e-action-sheet__header" v-if="props.title">
					<text class="e-action-sheet__header__title e-line-1">{{props.title}}</text>
					<view class="e-action-sheet__header__icon-wrap" @tap.stop="cancel">
						<e-icon name="close" size="17" color="#c8c9cc" bold></e-icon>
					</view>
				</view>
				<text class="e-action-sheet__description" :style="[{
						marginTop: `${props.title && props.description ? 0 : '18px'}`
					}]" v-if="props.description">{{props.description}}</text>
				<slot>
					<e-line v-if="props.description"></e-line>
					<view class="e-action-sheet__item-wrap">
						<view v-for="(item, index) in props.actions" :key="index" >
							<!-- #ifdef MP -->
							<button class="e-reset-button" :openType="item.openType"
								@getuserinfo="onGetUserInfo" @contact="onContact" @getphonenumber="onGetPhoneNumber"
								@error="onError" @launchapp="onLaunchApp" @opensetting="onOpenSetting" :lang="item.lang"
								:session-from="item.sessionFrom" :send-message-title="item.sendMessageTitle"
								:send-message-path="item.sendMessagePath" :send-message-img="item.sendMessageImg"
								:show-message-card="item.showMessageCard" :app-parameter="item.appParameter"
								@tap="selectHandler(index)"
								:hover-class="!item.disabled && !item.loading ? 'e-action-sheet--hover' : ''">
								<!-- #endif -->
								<view class="e-action-sheet__item-wrap__item" @tap.stop="selectHandler(index)"
									:hover-class="!item.disabled && !item.loading ? 'e-action-sheet--hover' : ''"
									:hover-stay-time="150">
									<template v-if="!item.loading">
										<text class="e-action-sheet__item-wrap__item__name"
											:style="[itemStyle(index)]">{{ item.name }}</text>
										<text v-if="item.subname"
											class="e-action-sheet__item-wrap__item__subname">{{ item.subname }}</text>
									</template>
									<e-loading-icon v-else custom-class="van-action-sheet__loading" size="18"
										mode="circle" />
								</view>
								<!-- #ifdef MP -->
							</button>
							<!-- #endif -->
							<e-line v-if="index !== props.actions.length - 1"></e-line>
						</view>
					</view>
				</slot>
			</view>
			<e-gap  :bgColor="props.gapColor" :height="props.gapHeight" v-if="props.cancelText"></e-gap>
			<view class="e-action-sheet__cancel" hover-class="e-action-sheet--hover" :style="[roundStyle]">
				<text @touchmove.stop.prevent :hover-stay-time="150" v-if="props.cancelText"
					class="e-action-sheet__cancel-text" @tap="cancel">{{props.cancelText}}</text>
			</view>
		</view>
	</e-popup>
</template>

<script lang="ts">
	import {
		defineComponent
	} from 'vue'
	import mpMixin from "../../libs/mixin/mpMixin";
	/**
	 * ActionSheet 操作菜单
	 * @description 本组件用于从底部弹出一个操作菜单，供用户选择并返回结果。本组件功能类似于uni的uni.showActionSheetAPI，配置更加灵活，所有平台都表现一致。
	 * @tutorial https://www.uviewui.com/components/actionSheet.html
	 * 
	 * @property {Boolean}			show				操作菜单是否展示 （默认 false ）
	 * @property {String}			title				操作菜单标题
	 * @property {String}			description			选项上方的描述信息
	 * @property {Array<Object>}	actions				按钮的文字数组，见官方文档示例
	 * @property {String}			gapColor			取消按钮与上方间隔部分背景颜色
	 * @property {Number|String}			gapHeight			取消按钮与上方间隔部分高度
	 * @property {String}			cancelText			取消按钮的提示文字,不为空时显示按钮
	 * @property {Boolean}			closeOnClickAction	点击某个菜单项时是否关闭弹窗 （默认 true ）
	 * @property {Boolean}			safeAreaInsetBottom	处理底部安全区 （默认 true ）
	 * @property {Boolean}			closeOnClickOverlay	点击遮罩是否允许关闭  (默认 true )
	 * @property {Number|String}	round				圆角值，默认无圆角  (默认 0 )
	 * @property {Object}			customStyle				定义需要用到的外部样式
	 * 
	 * @event {Function} select			点击ActionSheet列表项时触发 
	 * @event {Function} close			点击取消按钮时触发
	 * @event {Function} getuserinfo	用户点击该按钮时，会返回获取到的用户信息，回调的 detail 数据与 wx.getUserInfo 返回的一致，openType="getUserInfo"时有效
	 * @event {Function} contact		客服消息回调，openType="contact"时有效
	 * @event {Function} getphonenumber	获取用户手机号回调，openType="getPhoneNumber"时有效
	 * @event {Function} error			当使用开放能力时，发生错误的回调，openType="error"时有效
	 * @event {Function} launchapp		打开 APP 成功的回调，openType="launchApp"时有效
	 * @event {Function} opensetting	在打开授权设置页后回调，openType="openSetting"时有效
	 * @example <e-action-sheet :actions="list" :title="title" :show="show"></e-action-sheet>
	 */
	export default defineComponent({
		name: "e-action-sheet",
		mixins: [mpMixin]
	})
</script>

<script lang="ts" setup>
	import {toRefs,computed} from 'vue'
	import {
		actionSheetProps,
		actionSheetEmit
	} from './props';
	import type {
		StyleProperties
	} from "../../libs/tokens";
	import {
		useDefaultProps
	} from '../../libs/hooks'
	import {
		addUnit
	} from "../../libs/utils/_utils";
	
	import componentsProps, {
		type DefaultProps
	} from "../../libs/config/componentsProps";
	
	const { actionSheet: actionSheetDefaultProps } = toRefs(componentsProps);
	
	const _props = defineProps(actionSheetProps)
	
	const props = useDefaultProps < DefaultProps['actionSheet'] > (_props, actionSheetDefaultProps);

	const emit = defineEmits(actionSheetEmit)
	
	const roundStyle = computed(() => {
		return {
			borderRadius:addUnit(props.value.round)
		}
	})

	const itemStyle = (index: number) => {
		let style: StyleProperties = {};
		if (props.value.actions![index].color) style.color = props.value.actions![index].color
		if (props.value.actions![index].fontSize) style.fontSize = addUnit(props.value.actions![index].fontSize as string)
		// 选项被禁用的样式
		if (props.value.actions![index].disabled) style.color = '#c0c4cc'
		return style;
	}

	const closeHandler = () => {
		// 允许点击遮罩关闭时，才发出close事件
		if (props.value.closeOnClickOverlay) {
			emit('close')
		}
	}
	// 点击取消按钮
	const cancel = () => {
		emit('close')
	}
	const selectHandler = (index: number) => {
		const item = props.value.actions![index]
		if (item && !item.disabled && !item.loading) {
			emit('select', item)
			if (props.value.closeOnClickAction) {
				emit('close')
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "../../libs/theme/action-sheet.scss";
</style>
